<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px;/* 图片与文字链接出间隙 */
				margin-bottom: 50px;/* 图片与文字链接出间隙 */
			p{
				font-size: 16px;/* 页面默认字体尺寸 */
				line-height: 20px; /* 浮动文字 ，行高无法设定*/
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片环绕</h1>
		<img src="img/2.png" alt="超赛2" width="300px" height="400px" />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, tenetur aut iusto animi reiciendis voluptate, neque, incidunt consequuntur ullam asperiores laudantium repellat? Commodi accusantium sint voluptas laboriosam facere aut nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo non iusto aspernatur qui sit minima et tempore saepe provident illo laborum assumenda accusamus, rem, quasi eveniet a modi consequatur corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eligendi odio praesentium nam aperiam maxime distinctio ad dicta possimus recusandae ipsam libero iure dignissimos tempore ab, maiores officia porro vitae.</p>
	</body>
</html>